 <template>
  <div>
    <tTable :columns="columns" :data="tableData">
      <!-- 操作 -->
      <template v-slot:amount="slotProps">
        <div>￥{{slotProps.scope.row.amount}}</div>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>
  </div>
</template>

<script>
import { getSettlementPayRecord } from "api/account.js";
import { formatDateTime } from "src/util/time";
import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [],
      balance: 20000,
      withdraw: 15200,
      Allbalance: 3056,
      searchData: "",

      total: -1,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "sourceAccount", label: "发起方" }
        },
        {
          attr: { prop: "targetAccount", label: "接收方" }
        },
        {
          attr: { prop: "purpose", label: "交易类型", width: "100" }
        },
        {
          slot: "amount",
          attr: { prop: "amount", label: "交易金额", width: "100" }
        },
        {
          attr: { prop: "courseName", label: "相关课程" }
        },
        {
          attr: { prop: "occurTime", label: "交易时间" }
        }
      ]
    };
  },
  components: { Pagination, tTable },
  mounted() {
    this.getData(1);
  },
  methods: {
    search: function() {},
    handleCreate: function() {},
    getData: function(pageNumber) {
      getSettlementPayRecord(pageNumber).then(res => {
        this.tableData = res.content.map(item => {
          item.occurTime = formatDateTime(item.occurTime);
          return item;
        });

        this.total = res.totalElements;
      });
    },

    handleChange: function(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.card-container {
  @include fj(flex-start);
}
.card-style {
  margin: 10px;
}
</style>
